<template>
  <div class="app-container">
    <el-form status-icon :model="sysRole" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :label-position="labelPosition">
      <el-form-item label="角色名字" prop="name">
        <el-input v-model="sysRole.name"></el-input>
      </el-form-item>
      <el-form-item label="角色Code" prop="code">
        <el-input v-model="sysRole.code"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="sysRole.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="buttonDisabled" type="primary" @click="submitForm('ruleForm')">{{ submitFormText }}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import roleApi from '@/api/acl/role'

export default {
  data() {
    return {
      // 对齐方式
      labelPosition: 'right',
      // 保存按钮是否禁用
      buttonDisabled: false,
      submitFormText: '新增',
      sysRole: {},
      rules: {
        name: [
          {required: true, message: '请输入角色名字', trigger: 'blur'},
          {min: 2, max: 32, message: '长度在 2 到 32 个字符', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入角色Code', trigger: 'blur'},
          {min: 2, max: 32, message: '长度在 2 到 32 个字符', trigger: 'blur'}
        ],
      }
    };
  },

  watch: {
    $route(to, from) {
      // console.log('监听器：路由变化......', " to->" + to, " from->" + from)
      this.init()
    }
  },

  created() {
    this.init()
  },

  methods: {

    init() {
      if (this.$route.params && this.$route.params.id) {
        this.showPassword = false
        this.submitFormText = '修改'
        const id = this.$route.params.id
        this.findById(id)
      } else {
        this.sysRole = {}
      }
    },

    findById(id) {
      roleApi.findById(id).then(response => {
        this.sysRole = response.data.item
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 防止表单重复提交
          this.saveBtnDisabled = true
          if (!this.sysRole.id) {
            this.saveSysRole()
          } else {
            this.updateSysRole()
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    saveSysRole() {
      roleApi.saveSysRole(this.sysRole).then(response => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/acl/role/list' })
        }
      })
    },
    updateSysRole() {
      roleApi.updateById(this.sysRole).then(response => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/acl/role/list' })
        }
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.demo-ruleForm {
  width: 460px;
}
</style>
